<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>温智情趣工作室管理系统</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <style>
        body{
            background-image: url("../image/阿西吧.jpg");
            background-repeat: no-repeat;
            background-size: 100%;
            font-size: 25px;
            font-family:STXingkai;
        }
        a{
            text-decoration:none;
        }
        button{
            margin:10px;
        }
        /*定义滚动条样式（高宽及背景）*/
        ::-webkit-scrollbar {
            width: 6px;   /* 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度*/
            background: #007acc;
        }
        /*定义滚动条轨道（凹槽）样式*/
        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    /* 较少使用 */
            border-radius: 3px;
        }
        /*定义滑块 样式*/
        ::-webkit-scrollbar-thumb {
            border-radius: 3px;
            height: 100px;    /* 滚动条滑块长度 */
            background-color: #ccc;
        }
        ::-webkit-scrollbar {
            height: 0;
            width: 0;
            color: transparent;
        }
    </style>
</head>
<body>
    <div class="container-fluid" style="background-color: rgba(0,0,0,0)">
        <div class="row" style="background-color: rgba(0,0,0,0.1)">
            <!--        上方标题区域-->
            <div class=" col-lg-12" style="color:#F0680D;font-size:60px;box-shadow: inset 2px -1px 1px #444, inset -1px 1px 1px #444;">

                <div class=" col-lg-8" style="display:inline-block;text-align:center; ">温智情趣工作室管理系统！！！</div>
                <div class=" col-lg-3" style="display:inline-block;text-align:center;font-size: 16px">

                            <img style="display: inline;width: 25px;height: 25px;" src="http://t.cn/RCzsdCq" >
                            <span id="employeeName"></span>
                            <a style="text-decoration:none;" href="">基本资料</a>
                            <a style="text-decoration:none;" href="">安全设置</a>
                            <a style="text-decoration:none;" href="../login.html" >退了</a>
                </div>
            </div>


            <div class="clearfix visible-xs"></div>
            <!--        左侧导航栏区域-->
            <div id="system" class=" col-lg-2" style="text-align:center;color:#f0680d;font-size:30px;box-shadow: inset 2px -1px 1px #444444, inset -1px 1px 1px #444444;">
                <div class=" col-lg-10" style="height: 60px;font-size:40px; color:#EFEF09;">
                    菜单栏
                </div>
                <nav   class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
                    <ul class="nav sidebar-nav" style="background-color: rgba(0,0,0,0)" >
                        <li v-for="item in menus" v-if="item.menuPid==0" class="dropdown">
                            <a href="javascript:void(0);" style="text-decoration:none;color: #0aecb7" v-on:click="toggle()"
                                                 class="dropdown-toggle astyle" data-toggle="dropdown" v-text="item.menuName">
                            <i class="fa fa-fw fa-plus"> </i> 货物管理
                            <span class="caret"> </span> </a>
                            <ul class="dropdown-menu" role="menu" style="background: black;height:300px;overflow-y:auto">
                                <li v-for="menu in menus" v-if="menu.menuPid==item.menuId" v-on:click="showContent(menu.menuUrl)">
                                    <a href="javascript:void(0);" v-text="menu.menuName" style="text-decoration:none;font-size: 25px;color: #8e0aec;margin-left:22px" >
                                    </a>
                                </li>
                            </ul>
                        </li>

                    </ul>
                </nav>
            </div>

            <!--        右侧内容主体区域-->
            <div class="col-lg-10" style="height:580px; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                <iframe frameborder = 0  id="content-iframe" width="100%" height="580px" ></iframe>

            </div>
        </div>
    </div>
    <script type="text/javascript" src="../css/jquery-3.4.1.js"></script>
    <script src="../bootstrap/js/bootstrap.js" ></script>
    <script src="../vue/vue.js" charset="utf-8"></script>
    <script>


        $(function(){
            let menus = [];
            let bookTabVue;
            //向后台提交请求获取session中的数据
            $.post("../SystemUser/selSession",function(data){
                $("#employeeName").text("欢迎你,"+data.employee.employeeName);
                menus  = data.employee.menuList;
                bookTabVue = new Vue({
                    el: '#system',
                    data: {
                        menus:menus// 菜单数据
                    },
                    methods: {
                        //点击一级菜单 展示二级菜单
                        toggle:function() {
                            var trigger = $('.hamburger'),
                                overlay = $('.overlay'),
                                isClosed = false;
                            trigger.click(function() {
                                hamburger_cross();
                            });
                            function hamburger_cross() {
                                if (isClosed == true) {
                                    overlay.hide();
                                    trigger.removeClass('is-open');
                                    trigger.addClass('is-closed');
                                    isClosed = false;
                                } else {
                                    overlay.show();
                                    trigger.removeClass('is-closed');
                                    trigger.addClass('is-open');
                                    isClosed = true;
                                }
                            }
                            $('[data-toggle="offcanvas"]').click(function() {
                                $('#wrapper').toggleClass('toggled');
                            });
                        },
                        //本方法为内容主题区域引入页面
                        showContent: function(url){
                            //使用jquery标签设置iframe标签的路径
                            $("#content-iframe").attr("src",url)
                        }
                    }
                });
            },"json")
        });
    </script>
</body>
</html>